<template>
    <div>
        <el-card class="card-box">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <div v-if="ruleForm.sign!='1'">
                    <mytitle>基本信息</mytitle>
                    <el-form-item label="地块名称" prop="landName" style="width: 320px;" >
                        <el-input type="text" v-model="ruleForm.landName" placeholder="请输入地块名称" />
                    </el-form-item>
                    <el-form-item label="地块面积"  prop="totalArea" style="width: 320px;" >
                        <el-input type="text" v-model="ruleForm.totalArea" placeholder="请输入地块面积">
                        <template slot="append">m²</template>
                        </el-input>
                    </el-form-item>
                    <div></div>
                    <el-form-item label="地块坐标" prop="coords" style="width: 400px;">
                        <el-card class="totalArea">
                            <div v-for="(item,index) in ruleForm.coords" :key="index" class="totalArea-item">
                                <div style="width: 50%;">lat:{{ item.lat }}</div>
                                <div style="width: 50%;">lng:{{ item.lng }}</div>
                            </div>
                        </el-card>
                    </el-form-item>
                    <div></div>
                    <el-form-item label="地块图片" prop="picUrl">
                       <mysend :picUrl="ruleForm.landPicUrl" @getUrl="getMypic" />
                    </el-form-item>
                    <div></div>
                    <el-form-item label="绑定品种" prop="variety">
                        <el-select v-model="ruleForm.variety" multiple placeholder="请选择品种" v-loading="loading" @visible-change="varietyChange">
                            <el-option v-for="item in varietyType" :key="item.id" :label="item.varietyName" :value="item.varietyName"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="人员" prop="operatorId">
                        <el-select v-model="ruleForm.operatorId" placeholder="请选择人员" v-loading="loading1">
                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <div></div>
                    <el-form-item label="状态" prop="disabled">
                        <el-radio-group v-model="ruleForm.disabled">
                            <el-radio :label='0'>禁用</el-radio>
                            <el-radio :label='1'>启用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>
                
                <mytitle>租赁信息</mytitle>
                <div style="width: 100%;font-size: 16px;font-weight: 600;">租金配置</div>
                <el-form-item label="一年" prop="rentConfiguration.year" style="width: 320px;">
                    <el-input type="number" v-model="ruleForm.rentConfiguration.year">
                        <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="六个月" prop="rentConfiguration.six" style="width: 320px;">
                    <el-input type="number" v-model="ruleForm.rentConfiguration.six">
                        <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="三个月" prop="rentConfiguration.three" style="width: 320px;">
                    <el-input type="number" v-model="ruleForm.rentConfiguration.three">
                        <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <div></div>
                <el-form-item label="单品种最低面积" prop="lowestGrow" label-width="160px" style="width: 320px;">
                    <el-input type="number" v-model="ruleForm.lowestGrow">
                        <template slot="append">m²</template>
                    </el-input>
                </el-form-item>
                <div></div>
                <el-form-item>
                    <el-button  @click="submitForm('ruleForm')" type="success" >{{ruleForm.sign=='1'?'配置完成':'确认编辑'}}</el-button>
                    <el-button @click="$router.go(-1)" type="success"  plain>取消</el-button>
                </el-form-item>
            </el-form>
            <div v-if="ruleForm.sign!='1'">
                <mytitle>租赁记录</mytitle>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column align="center" type="index" label="序号" width="80">
                    </el-table-column>
                    <el-table-column align="center" prop="fosterName" width="100" label="客户名称">
                    </el-table-column>
                    <el-table-column align="center" prop="duration" label="租赁时间" width="220">
                    </el-table-column>
                    <el-table-column align="center" prop="rent" label="租金" width="180">
                    </el-table-column>
                    <el-table-column align="center" prop="state" width="180" label="状态">
                        <template slot-scope="scope">
                            <div>{{ scope.row.state == 1 ? '已完成' : '租赁中' }}</div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            
        </el-card>
    </div>
</template>
<script>
import {findLeaseRecordByLandId,findLandMsgById,findAllOperator,compileLandMsg,findAllVariety} from '../util/api.js'
export default {
    data() {
        return {
            loading:false,
            loading1:false,
            tableData: [],
            ruleForm: {
                landId:"",
                sign:"",//编辑还是配置
                landName: "",//地块名称
                totalArea: "",//地块面积
                coords:[],//地块坐标
                landPicUrl: "",//地块图片
                disabled: "",//地块状态
                variety: [],//地块品种
                operatorId: "",//地块人员
                rentConfiguration:{
                    year: "",//一年
                    six: "",//六个月
                    three: "",//三个月
                },
               
                lowestGrow: "",//最低面积
            },
            options:[],
            varietyType:[],
            rules: {
                landName: [
                    { required: true, message: '请输入地块名称', trigger: 'blur' },
                ],
                totalArea: [
                    { required: true, message: '请输入地块面积', trigger: 'blur' },
                ],
                landPicUrl: [
                    { required: true, message: '请至少选择一个张图片', trigger: 'blur' }
                ],
                disabled: [
                    { required: true, message: '请选择状态', trigger: 'change' }
                ],
                variety: [
                    { type: 'array', required: true, message: '请至少选择一个水果种类', trigger: 'change' }
                ],
                operatorId: [
                    { required: true, message: '请选择人员', trigger: 'change' }
                ],
                'rentConfiguration.year': [
                    { required: true, message: '请输入一年租金', trigger: 'blur' },
                ],
                'rentConfiguration.six': [
                    { required: true, message: '请输入六个月租金', trigger: 'blur' },
                ],
                'rentConfiguration.three': [
                    { required: true, message: '请输入三个月租金', trigger: 'blur' },
                ],
                lowestGrow: [
                    { required: true, message: '请输入最低平方', trigger: 'blur' },
                ]
            }
        }
    },
    mounted(){
            this.ruleForm.sign = this.$route.query.sign
            this.ruleForm.landId = this.$route.query.landId
           if(this.$route.query.sign=='3'){
                this.findAllOperator()
                this.getTable()
                this.getDetail()
            }
    },
    methods: {
      async  getDetail(){
        let res = await findLandMsgById({landId:this.ruleForm.landId})
                if(res.code!=200)return
                // console.log(res)
                this.ruleForm = res.data
                this.ruleForm.sign = this.$route.query.sign
        },
      async getTable(){
        let res = await findLeaseRecordByLandId({landId:this.ruleForm.landId})
           if(res.code!=200)return
           this.tableData = res.data
        }, 
      async findAllOperator(){
        this.loading1=true
        let res = await findAllOperator()
        // console.log(res)
          if(res.code!=200)return
          this.options = res.data
          this.loading1=false
        }, 
      async findAllVariety(){
             this.loading=true
             let res = await findAllVariety()
             if(res.code!=200)return
             this.varietyType = res.data.rows
             this.loading=false
        },
        varietyChange(val){
            if(val)this.findAllVariety()
        },
        getMypic(res) {
            if(res){
                this.ruleForm.landPicUrl = res
            } 
        },
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    // console.log(this.ruleForm)
                    let res = await compileLandMsg(this.ruleForm)
                    // console.log(res)
                    if(res.code!=200)return this.$message.error(res.msg)
                    this.$message.success('编辑成功！')
                    this.$router.go(-1)
                } else {
                    // console.log('error submit!!');
                    return false;
                }
            });
        },
    }
}
</script>
<style lang="less" scoped>
.card-box {
    width: 100%;
    height: 100%;

    .avatar {
        width: 146px;
        height: 146px;
        border-radius: 5px;
    }

    .demo-ruleForm {
        width: 100%;

        .el-form-item {
            display: inline-block;
        }
    }
}
/deep/.is-checked .el-radio__label{
    color:#01B780!important;
} 
/deep/.is-checked .el-radio__inner{
    color: #01b780 !important;
    background-color:#01B780!important;
}
.totalArea{
    width: 100%;
    .totalArea-item{
        display: flex;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        text-align: center;
        gap:10px;
        margin: 10px 0;
    }
}
</style>
